﻿<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Office Click-To-Run Configuration XML Editor</title>

    <link rel="stylesheet" href="components/Table/Table.min.css" />
    <link rel="stylesheet" href="components/Button/Button.min.css" />
    <link rel="stylesheet" href="components/TextField/TextField.min.css" />
    <link rel="stylesheet" href="components/Toggle/Toggle.min.css" />
    <link rel="stylesheet" href="components/DatePicker/DatePicker.css" />
    <link rel="stylesheet" href="components/NavBar/NavBar.min.css">
    <link rel="stylesheet" href="components/CommandBar/CommandBar.min.css">
    <link rel="stylesheet" href="components/Callout/Callout.min.css">
    <link rel="stylesheet" href="components/Dialog/Dialog.min.css">
    <link href="stylesheets/typeahead.css" rel="stylesheet">
    <link href="stylesheets/typeahead-override.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="components/Panel/Panel.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0.1/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0.1/fabric.components.min.css">

    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-70271323-1', 'auto');
  ga('send', 'pageview');

    </script>

    <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="./components/TextField/Jquery.TextField.js"></script>
    <script type="text/javascript" src="./components/NavBar/Jquery.NavBar.js"></script>
    <script type="text/javascript" src="./components/CommandBar/Jquery.CommandBar.js"></script>
    <script type="text/javascript" src="./Scripts/vkbeautify.0.99.00.beta.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <!-- HighlightJS addition for syntax highlighting in XML. See Highlightjs.org for usage information -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/languages/xml.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/solarized_light.min.css" rel="stylesheet" />


    <style type="text/css">
        body {
            margin: 0px 0px;
            overflow: hidden;
        }

        h1 {
            padding: 8px;
        }

        #componentWrapper {
            width: 100%;
            height: 100%;
        }

        .ms-Table.is-open {
            position: relative;
            margin-bottom: 10px;
        }

        .ms-Dialog {
            position: relative;
            margin-bottom: 10px;
        }

        .ms-NavBar-item .ms-Table {
            position: absolute;
        }

        .ms-Table .ms-Table {
            position: absolute;
        }

        .option-panel {
            display: none;
        }

        .visible {
            display: block;
        }

        .custom-cmditem {
            line-height: 46px;
            padding: 0 6px;
            min-width: 22px;
            text-align: center;
            position: relative;
            display: inline-block;
            margin-right: 8px;
            color: #0078d7;
            height: 50px;
            outline: none;
            vertical-align: top;
        }

        .ms-Callout {
            width: 450px;
        }

        .headerText {
            font-family: "SegoeUI-SemiLight-final","Segoe UI SemiLight","Segoe UI WPC Semilight","Segoe UI",Segoe,Tahoma,Helvetica,Arial,sans-serif;
            font-size: 22px;
            -webkit-font-smoothing: antialiased;
        }

        .twitter-typeahead {
            width: 100%;
        }

        .ms-CommandBarItem:hover {
            /*background-color: #004578;*/
            color: #0078d7;
            -webkit-transition: background 0.5s linear;
            -moz-transition: background 0.5s linear;
            -ms-transition: background 0.5s linear;
            -o-transition: background 0.5s linear;
            transition: background 0.5s linear;
        }

        .ms-CommandBarItemTop:hover {
            background-color: #004578;
            color: #0078d7;
            -webkit-transition: background 0.5s linear;
            -moz-transition: background 0.5s linear;
            -ms-transition: background 0.5s linear;
            -o-transition: background 0.5s linear;
            transition: background 0.5s linear;
        }

        .Editor-Column {
            padding-right: 8px;
            padding-left: 8px;
        }

        #box {
            width: 150px;
            height: 150px;
            background: #FFF;
            border: red dotted 5px;
            text-align: center;
            position: absolute;
            margin-left: -75px;
            margin-top: -75px;
            left: 50%;
            top: 50%;
            z-index: 20;
            display: none;
        }

        #screen {
            position: absolute;
            left: 0;
            top: 0;
            background: #000;
        }

        .ms-ListItem-tertiaryText {
            overflow: visible;
            text-overflow: ellipsis-word;
            white-space: normal;
            display: block;
        }

        .ms-ListItem-primaryText {
            color: #212121;
            font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif;
            font-size: 18px;
            padding-right: 80px;
            position: relative;
            top: -4px;
        }

        .ms-Dropdown-items {
            max-height: 200px;
        }

        .ctr-button {
            margin-top: 10%;
            margin-left: 25%;
            margin-right: auto;
            width: 50%;
        }

        /*#info {
            display: none;
        }*/

        #disclaimer {
            padding-top: 5%;
        }
    </style>
</head>

<body>
    <div class="ms-bgColor-themeDarker ms-CommandBar" style="background-color:#0072c5;color:#4c9cd6;height: 50px;">
        <div class="ms-CommandBar-sideCommands">
            <div class="ms-CommandBarItem ms-CommandBarItem--iconOnly ms-CommandBarItemTop" style="border-left:1px solid #4c9cd6;
                             border-right:1px solid #4c9cd6; margin-right:-5px;height: 50px;width:50px" title="About">
                <div class="ms-CommandBarItem-linkWrapper">
                    <div class="ms-CommandBarItem-link" onclick="showAbout()">
                        <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--question ms-fontColor-white" style="font-size: 20px;margin-top: 15px"></span>
                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular ms-fontColor-white">About</span>
                    </div>
                </div>
            </div>
            <div id="menuGitHubIssues" class="ms-CommandBarItem ms-CommandBarItem--iconOnly ms-CommandBarItemTop" style="border-left:1px solid #4c9cd6;border-right:1px solid #4c9cd6;
                            margin-right:-5px;height: 50px;width:50px" title="Issues">
                <div class="ms-commandbaritem-linkwrapper">
                    <div class="ms-CommandBarItem-link">
                        <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--support ms-fontColor-white" style="font-size: 20px;margin-top: 15px"></span>
                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular ms-fontColor-white">Issues</span>
                    </div>
                </div>
            </div>
            <div id="menuViewOnGitHub" class="ms-CommandBarItem ms-CommandBarItem--iconOnly ms-CommandBarItemTop" style="border-right:1px solid #4c9cd6;
                            border-left:1px solid #4c9cd6;margin-right:-5px;height: 50px;width:50px" title="View on GitHub">
                <div id="btviewongithub" class="ms-CommandBarItem-linkWrapper">
                    <div class="ms-CommandBarItem-link">
                        <img class="ms-CommandBarItem-icon ms-Icon ms-fontColor-white" style="font-size: 20px;margin-top: 13px" src="images/github24.png">
                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular ms-fontColor-white">View On GitHub</span>
                    </div>
                </div>
            </div>
        </div>
        <div id="mainArea" class="ms-CommandBar-mainArea">
            <div class="custom-cmditem">
                <span class="ms-font-l ms-font-weight-regular ms-fontColor-white headerText" style="height:100%;width:100%;margin:0px 0px 0px 15px;border-right:1px solid #4c9cd6; padding-right:15px;">Office 365 ProPlus</span>
            </div>
            <div class="custom-cmditem">
                <span class="ms-font-l ms-font-weight-regular ms-fontColor-white headerText" style="height:100%;width:100%;margin:0px 0px 0px 0px;">Configuration XML Editor</span>
            </div>
        </div>
    </div>

    <div id="componentWrapper">
        <div class="ms-Grid">
            <div class="ms-Grid-row">
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <td style="vertical-align: top;">
                            <div id="menuColumn" class="Editor-Column" style="width: 300px;">
                                <div id="menuSec" style="border-right: solid 1px #e5e3e3;height:500px;">

                                    <br />

                                    <div class="ms-Table">
                                        <div class="ms-Table-row">
                                            <span class="ms-font-xl">Version</span>
                                        </div>
                                        <div id="office2016Select" class="ms-Table-row is-selected navrowversion">
                                            <span class="ms-Table-cell" onclick="setVersionPanel('office2016Select')">Office 365 ProPlus (2016)</span>
                                        </div>
                                    </div>

                                    <br />

                                    <div class="ms-Table">
                                        <div class="ms-Table-row">
                                            <span class="ms-font-xl">Section</span>
                                        </div>
                                        <div id="addProductRow" class="ms-Table-row  is-selected navrow">
                                            <span class="ms-Table-cell" onclick="setPanel('AddProductPanel', 'addProductRow')">Add Product</span>
                                        </div>
                                        <div id="excludeProductsRow" class="ms-Table-row navrow">
                                            <span class="ms-Table-cell" onclick="setPanel('ExcludeProductsPanel', 'excludeProductsRow')">Exclude Programs</span>
                                        </div>
                                        <div id="removeProductRow" class="ms-Table-row navrow">
                                            <span class="ms-Table-cell" onclick="setPanel('RemoveProductPanel', 'removeProductRow')">Remove Product</span>
                                        </div>
                                        <div id="optionsRow" class="ms-Table-row navrow">
                                            <span class="ms-Table-cell" onclick="setPanel('AdditionalOptionsPanel', 'optionsRow')">Additional Options</span>
                                        </div>
                                        <div id="updatesRow" class="ms-Table-row navrow">
                                            <span class="ms-Table-cell" onclick="setPanel('UpdatesPanel', 'updatesRow')">Updates</span>
                                        </div>
                                        <div id="displayRow" class="ms-Table-row navrow">
                                            <span class="ms-Table-cell" onclick="setPanel('DisplayPanel', 'displayRow')">Display</span>
                                        </div>
                                        <div id="loggingRow" class="ms-Table-row navrow">
                                            <span class="ms-Table-cell" onclick="setPanel('LoggingPanel', 'loggingRow')">Logging</span>
                                        </div>
                                        <div id="propertiesRow" class="ms-Table-row navrow">
                                            <span class="ms-Table-cell" onclick="setPanel('PropertiesPanel', 'propertiesRow')">Properties</span>
                                        </div>
                                        <div id="templatesRow" class="ms-Table-row navrow">
                                            <span class="ms-Table-cell" onclick="setPanel('TemplatesPanel', 'templatesRow')">Templates</span>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td style="vertical-align: top;">
                            <div id="configColumn" class="Editor-Column" style="width: 450px;">
                                <!-- Start Add Product Panel -->
                                <div id="AddProductPanel" class="option-panel visible">
                                    <h1 class="ms-font-xxl">Add Product</h1>
                                    <div style="border-bottom:1px solid #e5e3e3">
                                        <h2 class="ms-font-xl">Required Fields</h2>
                                        <table>
                                            <tr>
                                                <td>
                                                    <label class="ms-Label">Product</label>
                                                </td>
                                                <td>
                                                    <i id="productInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('productInfo', this)"></i>
                                                </td>
                                            </tr>
                                        </table>
                                        <div class="ms-Dropdown">
                                            <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>

                                            <select id="cbProduct" class="ms-Dropdown-select">
                                                <option value="O365ProPlusRetail">Office 365 ProPlus</option>
                                                <option value="O365BusinessRetail">Office 365 for Business</option>
                                                <option value="LanguagePack">Language Pack (Preview)</option>
                                                <option value="VisioProRetail">Visio for Office 365</option>
                                                <option value="ProjectProRetail">Project for Office 365</option>
                                                <option value="VisioProXVolume">Visio Professional 2016 (Volume License)</option>
                                                <option value="VisioStdXVolume">Visio Standard 2016 (Volume License)</option>
                                                <option value="ProjectProXVolume">Project Professional 2016 (Volume License)</option>
                                                <option value="ProjectStdXVolume">Project Standard 2016 (Volume License)</option>
                                            </select>

                                        </div>


                                        <table>
                                            <tr>
                                                <td>
                                                    <label class="ms-Label">Edition</label>
                                                </td>
                                                <td>
                                                    <i id="editionInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('editionInfo', this)"></i>
                                                </td>
                                            </tr>
                                        </table>
                                        <div class="ms-Dropdown">
                                            <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>
                                            <select id="cbEdition" class="ms-Dropdown-select">
                                                <option value="32">32-bit</option>
                                                <option value="64">64-bit</option>
                                            </select>
                                        </div>

                                        <div id="branchSection">
                                            <table>
                                                <tr>
                                                    <td>
                                                        <label class="ms-Label">Channel</label>
                                                    </td>
                                                    <td>
                                                        <i id="branchInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('branchInfo', this)"></i>
                                                    </td>
                                                </tr>
                                            </table>
                                            <div class="ms-Dropdown">
                                                <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>
                                                <select id="cbBranch" class="ms-Dropdown-select">
                                                    <!--    <option oldvalue="Business" value="DeferredChannel">Deferred Channel</option>
                                                            <option oldvalue="FirstReleaseBusiness" value="FirstReleaseDeferredChannel"> First Release Deferred Channel</option>
                                                            <option oldvalue="Current" value="CurrentChannel">Current Channel</option>
                                                            <option oldvalue="FirstReleaseCurrent" value="FirstReleaseCurrentChannel"> First Release Current Channel</option> -->
                                                    <option oldvalue="Current" value="Current">Current</option>
                                                    <option oldvalue="Business" value="Deferred">Deferred</option>
                                                    <option oldvalue="FirstReleaseCurrent" value="FirstReleaseCurrent"> First Release Current</option>
                                                    <option oldvalue="FirstReleaseBusiness" value="FirstReleaseDeferred"> First Release Deferred</option>
                                                </select>
                                            </div>
                                        </div>

                                        <table>
                                            <tr>
                                                <td>
                                                    <label class="ms-Label">Language</label>
                                                </td>
                                                <td>
                                                    <i id="languageInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('languageInfo', this)"></i>
                                                </td>
                                            </tr>
                                        </table>

                                        <table style="position: relative;left:-3px;">
                                            <tr>
                                                <td style="width: 100%; padding-right: 10px">
                                                    <div class="ms-Dropdown">
                                                        <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>
                                                        <select id="cbLanguage" class="ms-Dropdown-select">                                                            
                                                            <option value="en-us">English (en-us)</option>
                                                            <option value="MatchOS">MatchOS</option>
                                                            <option value="ar-sa">Arabic (ar-sa)</option>
                                                            <option value="bg-bg">Bulgarian (bg-bg)</option>
                                                            <option value="zh-cn">Chinese (Simplified) (zh-cn)</option>
                                                            <option value="zh-tw">Chinese (zh-tw)</option>
                                                            <option value="hr-hr">Croatian (hr-hr)</option>
                                                            <option value="cs-cz">Czech (cs-cz)</option>
                                                            <option value="da-dk">Danish (da-dk)</option>
                                                            <option value="nl-nl">Dutch (nl-nl)</option>
                                                            <option value="et-ee">Estonian (et-ee)</option>
                                                            <option value="fi-fi">Finnish (fi-fi)</option>
                                                            <option value="fr-fr">French (fr-fr)</option>
                                                            <option value="de-de">German (de-de)</option>
                                                            <option value="el-gr">Greek (el-gr)</option>
                                                            <option value="he-il">Hebrew (he-il)</option>
                                                            <option value="hi-in">Hindi (hi-in)</option>
                                                            <option value="hu-hu">Hungarian (hu-hu)</option>
                                                            <option value="id-id">Indonesian (id-id)</option>
                                                            <option value="it-it">Italian (it-it)</option>
                                                            <option value="ja-jp">Japanese (ja-jp)</option>
                                                            <option value="kk-kz">Kazakh (kk-kz)</option>
                                                            <option value="ko-kr">Korean (ko-kr)</option>
                                                            <option value="lv-lv">Latvian (lv-lv)</option>
                                                            <option value="lt-lt">Lithuanian (lt-lt)</option>
                                                            <option value="ms-my">Malay (ms-my)</option>
                                                            <option value="nb-no">Norwegian (Bokm�l) (nb-no)</option>
                                                            <option value="pl-pl">Polish (pl-pl)</option>
                                                            <option value="pt-br">Portuguese (pt-br)</option>
                                                            <option value="pt-pt">Portuguese (pt-pt)</option>
                                                            <option value="ro-ro">Romanian (ro-ro)</option>
                                                            <option value="ru-ru">Russian (ru-ru)</option>
                                                            <option value="sr-latn-rs">Serbian (Latin) (sr-latn-rs)</option>
                                                            <option value="sk-sk">Slovak (sk-sk)</option>
                                                            <option value="sl-si">Slovenian (sl-si)</option>
                                                            <option value="es-es">Spanish (es-es)</option>
                                                            <option value="sv-se">Swedish (sv-se)</option>
                                                            <option value="th-th">Thai (th-th)</option>
                                                            <option value="tr-tr">Turkish (tr-tr)</option>
                                                            <option value="uk-ua">Ukrainian (uk-ua)</option>
                                                            <option value="vi-vn">Vietnamese (vi-vn)</option>                                                            
                                                        </select>
                                                    </div>
                                                </td>
                                                <td style="width: 150px;text-align: right; padding-right: 10px;padding-bottom: 10px">
                                                    <button id="btAddLanguage" class="ms-Button">
                                                        Add
                                                    </button>
                                                </td>
                                                <td style="width:80px;text-align: right;padding-bottom: 10px">
                                                    <button id="btRemoveLanguage" class="ms-Button" disabled="true">
                                                        Remove
                                                    </button>
                                                </td>
                                            </tr>
                                        </table>

                                        <div style="margin-bottom:10px">
                                            <button id="btAddProduct" class="ms-Button">
                                                Add Product
                                            </button>
                                            <button id="btRemoveProduct" class="ms-Button">
                                                Delete Product
                                            </button>
                                        </div>
                                    </div>     
                                    <h2 class="ms-font-xl">Version</h2>   
                                    <div id="newVersionSection">
                                        <table>
                                            <tr>
                                                <td>
                                                    <label class="ms-Label">Version</label>
                                                </td>
                                            </tr>
                                        </table>
                                        <div class="ms-Dropdown">
                                            <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>
                                            <select id="txtVersion" class="ms-Dropdown-select"></select>
                                        </div>
                                        <table>
                                            <tr>
                                                <td>
                                                    <label class="ms-Label">Build</label>
                                                </td>
                                            </tr>
                                        </table>
                                        <div class="ms-Dropdown" style="width:100%">
                                            <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>
                                            <select id="txtBuild" class="ms-Dropdown-select"></select>
                                        </div>
                                    </div>
                                    <table>
                                        <tr>
                                            <td>
                                                <label class="ms-Label">Legacy Version</label>
                                            </td>
                                        </tr>
                                    </table>
                                        <form data-toggle="validator" role="form">
                                            <div class="input-group" style="width:100%">
                                                <div id="legacyVersionTextBox">
                                                    <input id="txtLegacyVersion" type="text" pattern="^\d{2}\.\d\.\d{4}\.\d{4}$" maxlength="14"
                                                           class="ms-TextField-field typeahead">
                                                </div>
                                                <span id="versionSignal" class="glyphicon form-control-feedback" aria-hidden="true" style="display:none;"></span>
                                            </div>
                                        </form>
                                        <div style="margin-top:10px; margin-bottom:10px">
                                            <button id="btSaveVersion" class="ms-Button">
                                                Save
                                            </button>
                                        </div>
                                    </div>
                                <!-- End Add Product Panel -->
                                <!-- Start Exclude Office Programs Panel -->
                                <div id="ExcludeProductsPanel" class="option-panel">
                                    <table>
                                        <tr>
                                            <td>
                                                <h1 class="ms-font-xxl">Exclude Office Programs</h1>
                                            </td>
                                            <td>
                                                <i id="excludeProductsIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('excludeProductsInfo', this)"></i>
                                            </td>
                                        </tr>
                                    </table>
                                        <table>
                                            <tr>
                                                <td>
                                                    <label class="ms-Label">Product</label>
                                                </td>
                                            </tr>
                                        </table>
                                        <div class="ms-Dropdown">
                                            <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>
                                            <select id="cbExcludeProduct" class="ms-Dropdown-select">
                                                <option value="O365ProPlusRetail">Office 365 ProPlus</option>
                                                <option value="O365BusinessRetail">Office 365 for Business</option>
                                            </select>
                                        </div>

                                    <table style="position: relative; left: 70px;">
                                        <tr>
                                            <td style="width: 100px;">
                                                <div class="ms-Toggle">
                                                    <span class="ms-Toggle-description" style="position: relative; left: -60px; top: 30px;">Access</span>
                                                    <input type="checkbox" id="excludeAccess" class="ms-Toggle-input" checked />
                                                    <label for="excludeAccess" class="ms-Toggle-field">
                                                        <span class="ms-Label ms-Label--off">Excluded</span>
                                                        <span class="ms-Label ms-Label--on">Included</span>
                                                    </label>
                                                </div>

                                                <div class="ms-Toggle" style="position: relative; top: -40px;">
                                                    <span class="ms-Toggle-description" style="position: relative; left: -60px; top: 30px;">Excel</span>
                                                    <input type="checkbox" id="excludeExcel" class="ms-Toggle-input" checked />
                                                    <label for="excludeExcel" class="ms-Toggle-field">
                                                        <span class="ms-Label ms-Label--off">Excluded</span>
                                                        <span class="ms-Label ms-Label--on">Included</span>
                                                    </label>
                                                </div>

                                                <div class="ms-Toggle" style="position: relative; top: -80px;">
                                                    <span class="ms-Toggle-description" style="position: relative; left: -60px; top: 30px;">OneNote</span>
                                                    <input type="checkbox" id="excludeOneNote" class="ms-Toggle-input" checked />
                                                    <label for="excludeOneNote" class="ms-Toggle-field">
                                                        <span class="ms-Label ms-Label--off">Excluded</span>
                                                        <span class="ms-Label ms-Label--on">Included</span>
                                                    </label>
                                                </div>

                                                <div class="ms-Toggle" style="position: relative; top: -120px;">
                                                    <span class="ms-Toggle-description" style="position: relative; left: -60px; top: 30px;">OneDrive</span>
                                                    <input type="checkbox" id="excludeOneDrive" class="ms-Toggle-input" checked />
                                                    <label for="excludeOneDrive" class="ms-Toggle-field">
                                                        <span class="ms-Label ms-Label--off">Excluded</span>
                                                        <span class="ms-Label ms-Label--on">Included</span>
                                                    </label>
                                                </div>

                                                <div class="ms-Toggle" style="position: relative; top: -160px;">
                                                    <span class="ms-Toggle-description" style="position: relative; left: -60px; top: 30px;">Publisher</span>
                                                    <input type="checkbox" id="excludePublisher" class="ms-Toggle-input" checked  />
                                                    <label for="excludePublisher" class="ms-Toggle-field">
                                                        <span class="ms-Label ms-Label--off">Excluded</span>
                                                        <span class="ms-Label ms-Label--on">Included</span>
                                                    </label>
                                                </div>
                                            </td>
                                            <td style="width: 140px;"></td>
                                            <td>
                                                <div class="ms-Toggle">
                                                    <span class="ms-Toggle-description" style="position: relative; left: -65px; top: 30px;">Groove</span>
                                                    <input type="checkbox" id="excludeGroove" class="ms-Toggle-input" checked  />
                                                    <label for="excludeGroove" class="ms-Toggle-field">
                                                        <span class="ms-Label ms-Label--off">Excluded</span>
                                                        <span class="ms-Label ms-Label--on">Included</span>
                                                    </label>
                                                </div>

                                                <div class="ms-Toggle" style="position: relative; top: -40px;">
                                                    <span class="ms-Toggle-description" style="position: relative; left: -65px; top: 30px;">Lync</span>
                                                    <input type="checkbox" id="excludeLync" class="ms-Toggle-input" checked />
                                                    <label for="excludeLync" class="ms-Toggle-field">
                                                        <span class="ms-Label ms-Label--off">Excluded</span>
                                                        <span class="ms-Label ms-Label--on">Included</span>
                                                    </label>
                                                </div>

                                                <div class="ms-Toggle" style="position: relative; top: -80px;">
                                                    <span class="ms-Toggle-description" style="position: relative; left: -65px; top: 30px;">Outlook</span>
                                                    <input type="checkbox" id="excludeOutlook" class="ms-Toggle-input" checked />
                                                    <label for="excludeOutlook" class="ms-Toggle-field">
                                                        <span class="ms-Label ms-Label--off">Excluded</span>
                                                        <span class="ms-Label ms-Label--on">Included</span>
                                                    </label>
                                                </div>

                                                <div class="ms-Toggle" style="position: relative; top: -120px;">
                                                    <span class="ms-Toggle-description" style="position: relative; left: -65px; top: 30px;">PowerPoint</span>
                                                    <input type="checkbox" id="excludePowerPoint" class="ms-Toggle-input" checked />
                                                    <label for="excludePowerPoint" class="ms-Toggle-field">
                                                        <span class="ms-Label ms-Label--off">Excluded</span>
                                                        <span class="ms-Label ms-Label--on">Included</span>
                                                    </label>
                                                </div>

                                                <div class="ms-Toggle" style="position: relative; top: -160px;">
                                                    <span class="ms-Toggle-description" style="position: relative; left: -65px; top: 30px;">Word</span>
                                                    <input type="checkbox" id="excludeWord" class="ms-Toggle-input" checked />
                                                    <label for="excludeWord" class="ms-Toggle-field">
                                                        <span class="ms-Label ms-Label--off">Excluded</span>
                                                        <span class="ms-Label ms-Label--on">Included</span>
                                                    </label>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>

                                    <div style="margin-bottom:10px">
                                        <button id="btSaveExcludePrograms" class="ms-Button">
                                            Save
                                        </button>
                                    </div>
                                </div>
                                <!-- End Exclude Office Programs Panel -->
                                <!-- Start Remove Product Panel -->
                                <div id="RemoveProductPanel" class="option-panel">
                                    <table>
                                        <tr>
                                            <td>
                                                <h1 class="ms-font-xxl">Add Remove Product</h1>
                                            </td>
                                            <td>
                                                <i id="removeProductInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('removeProductInfo', this)"></i>
                                            </td>
                                        </tr>
                                    </table>

                                    <div class="ms-Toggle">
                                        <span class="ms-Toggle-description">Remove All or Selected Products</span>
                                        <input type="checkbox" id="removeAllProducts" class="ms-Toggle-input" />
                                        <label for="removeAllProducts" class="ms-Toggle-field">
                                            <span class="ms-Label ms-Label--off">Selected</span>
                                            <span class="ms-Label ms-Label--on">All</span>
                                        </label>
                                    </div>

                                    <table>
                                        <tr>
                                            <td>
                                                <label class="ms-Label">Product</label>
                                            </td>
                                        </tr>
                                    </table>
                                    <div class="ms-Dropdown">
                                        <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>
                                        <select id="cbRemoveProduct" class="ms-Dropdown-select">
                                            <option value="O365ProPlusRetail">Office 365 ProPlus</option>
                                            <option value="O365BusinessRetail">Office 365 for Business</option>
                                            <option value="VisioProRetail">Visio for Office 365</option>
                                            <option value="ProjectProRetail">Project for Office 365</option>
                                            <option value="VisioProXVolume">Visio Professional 2016 (Volume License)</option>
                                            <option value="VisioStdXVolume">Visio Standard 2016 (Volume License)</option>
                                            <option value="ProjectProXVolume">Project Professional 2016 (Volume License)</option>
                                            <option value="ProjectStdXVolume">Project Standard 2016 (Volume License)</option>
                                        </select>
                                    </div>

                                    <table>
                                        <tr>
                                            <td>
                                                <label class="ms-Label">Language</label>
                                            </td>
                                        </tr>
                                    </table>
                                    <table>
                                        <tr>
                                            <td style="width: 100%; padding-right: 10px">
                                                <div class="ms-Dropdown">
                                                    <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>
                                                    <select id="cbRemoveLanguage" class="ms-Dropdown-select">
                                                        <option value="en-us">English (en-us)</option>
                                                        <option value="MatchOS">MatchOS</option>
                                                        <option value="ar-sa">Arabic (ar-sa)</option>
                                                        <option value="bg-bg">Bulgarian (bg-bg)</option>
                                                        <option value="zh-cn">Chinese (Simplified) (zh-cn)</option>
                                                        <option value="zh-tw">Chinese (zh-tw)</option>
                                                        <option value="hr-hr">Croatian (hr-hr)</option>
                                                        <option value="cs-cz">Czech (cs-cz)</option>
                                                        <option value="da-dk">Danish (da-dk)</option>
                                                        <option value="nl-nl">Dutch (nl-nl)</option>
                                                        <option value="et-ee">Estonian (et-ee)</option>
                                                        <option value="fi-fi">Finnish (fi-fi)</option>
                                                        <option value="fr-fr">French (fr-fr)</option>
                                                        <option value="de-de">German (de-de)</option>
                                                        <option value="el-gr">Greek (el-gr)</option>
                                                        <option value="he-il">Hebrew (he-il)</option>
                                                        <option value="hi-in">Hindi (hi-in)</option>
                                                        <option value="hu-hu">Hungarian (hu-hu)</option>
                                                        <option value="id-id">Indonesian (id-id)</option>
                                                        <option value="it-it">Italian (it-it)</option>
                                                        <option value="ja-jp">Japanese (ja-jp)</option>
                                                        <option value="kk-kz">Kazakh (kk-kz)</option>
                                                        <option value="ko-kr">Korean (ko-kr)</option>
                                                        <option value="lv-lv">Latvian (lv-lv)</option>
                                                        <option value="lt-lt">Lithuanian (lt-lt)</option>
                                                        <option value="ms-my">Malay (ms-my)</option>
                                                        <option value="nb-no">Norwegian (Bokm�l) (nb-no)</option>
                                                        <option value="pl-pl">Polish (pl-pl)</option>
                                                        <option value="pt-br">Portuguese (pt-br)</option>
                                                        <option value="pt-pt">Portuguese (pt-pt)</option>
                                                        <option value="ro-ro">Romanian (ro-ro)</option>
                                                        <option value="ru-ru">Russian (ru-ru)</option>
                                                        <option value="sr-latn-rs">Serbian (Latin) (sr-latn-rs)</option>
                                                        <option value="sk-sk">Slovak (sk-sk)</option>
                                                        <option value="sl-si">Slovenian (sl-si)</option>
                                                        <option value="es-es">Spanish (es-es)</option>
                                                        <option value="sv-se">Swedish (sv-se)</option>
                                                        <option value="th-th">Thai (th-th)</option>
                                                        <option value="tr-tr">Turkish (tr-tr)</option>
                                                        <option value="uk-ua">Ukrainian (uk-ua)</option>
                                                        <option value="vi-vn">Vietnamese (vi-vn)</option>
                                                    </select>
                                                </div>
                                            </td>
                                            <td style="width: 150px;text-align: right; padding-right: 10px;padding-bottom:10px">
                                                <button id="btAddRemoveLanguage" class="ms-Button ">
                                                    Add
                                                </button>
                                            </td>
                                            <td style="width:80px;text-align: right;padding-bottom:10px">
                                                <button id="btRemoveRemoveLanguage" class="ms-Button" disabled="true">
                                                    Remove
                                                </button>
                                            </td>
                                        </tr>
                                    </table>

                                    <div style="margin-bottom:10px">
                                        <button id="btAddRemoveProduct" class="ms-Button">
                                            Add Remove Product
                                        </button>
                                        <button id="btDeleteRemoveProduct" class="ms-Button">
                                            Delete Remove Product
                                        </button>
                                    </div>
                                </div>
                                <!-- End Remove Product Panel -->
                                <!-- Start Additional Options Panel -->
                                <div id="AdditionalOptionsPanel" class="option-panel">
                                    <div>
                                        <table>
                                            <tr>
                                                <td>
                                                    <h1 class="ms-font-xxl">Additional Options</h1>
                                                </td>
                                            </tr>
                                        </table>

                                        <div id="mgtToggleGroup" class="ms-Toggle">
                                            <br />

                                            <span class="ms-Toggle-description">Enable Configuration Manager support</span>
                                            <input type="checkbox" id="mgtToggle" class="ms-Toggle-input">
                                            <label for="mgtToggle" class="ms-Toggle-field">
                                                <span class="ms-Label ms-Label--off">Disabled</span>
                                                <span class="ms-Label ms-Label--on">Enabled</span>
                                            </label>
                                        </div>

                                        

                                        <table>
                                            <tr>
                                                <td>
                                                    <label class="ms-Label">SourcePath</label>
                                                </td>
                                                <td>
                                                    <i id="srcPathInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('srcPathInfo', this)"></i>
                                                </td>
                                            </tr>
                                        </table>

                                        <form data-toggle="validator" role="form">
                                            <div class="controls form-group has-feedback">
                                                <input id="txtSourcePath" type="text" pattern="\\\\.*\\.*|http://.*|https://|^\w:\\.*"
                                                       class="ms-TextField-field" placeholder="Network, local, or HTTP path"
                                                       data-error="This must be a network, local, or HTTP path">
                                                <span id="sourcepathSignal" class="glyphicon form-control-feedback" aria-hidden="true" style="margin-right: 20px"></span>
                                            </div>
                                        </form>

                                        <table>
                                            <tr>
                                                <td>
                                                    <label class="ms-Label">DownloadPath</label>
                                                </td>
                                                <td>
                                                    <i id="dwnpthPathInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('dwnPathInfo', this)"></i>
                                                </td>
                                            </tr>
                                        </table>

                                        <form data-toggle="validator" role="form">
                                            <div class="controls form-group has-feedback">
                                                <input id="txtDownloadPath" type="text" pattern="\\\\.*\\.*|http://.*|https://|^\w:\\.*"
                                                       class="ms-TextField-field" placeholder="Network, local, or HTTP path"
                                                       data-error="This must be a network, local, or HTTP path">
                                                <span id="downloadpathSignal" class="glyphicon form-control-feedback" aria-hidden="true" style="margin-right: 20px"></span>
                                            </div>
                                        </form>

                                        <div id="pidKeyLabel" style="display: none;">
                                            <table>
                                                <tr>
                                                    <td>
                                                        <label class="ms-Label">PIDKEY</label>
                                                    </td>
                                                    <td>
                                                        <i id="pidkeyInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('pidkeyInfo', this)"></i>
                                                    </td>
                                                </tr>
                                            </table>

                                            <div>
                                                <input id="txtPidKey" type="text" pattern="^.{5}-.{5}-.{5}-.{5}-.{5}$"
                                                       class="ms-TextField-field" placeholder="XXXXX-XXXXX-XXXXX-XXXXX-XXXXX"
                                                       data-error="This must be a 25-character volume license key">
                                                <span id="pidkeySignal" class="glyphicon form-control-feedback" aria-hidden="true"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="margin-top:10px">
                                        <button id="btSaveAdditionalOptions" class="ms-Button">
                                            Save
                                        </button>
                                    </div>
                                </div>
                                <!-- End Additional Options Panel -->    
                                    <!-- Start Updates Panel -->
                                    <div id="UpdatesPanel" class="option-panel">
                                        <h1 class="ms-font-xxl">Updates</h1>
                                        <div id="updateToggleContainer" class="ms-Toggle">
                                            <span class="ms-Toggle-description">Enable Updates</span>
                                            <input type="checkbox" id="updatesEnabled" class="ms-Toggle-input" />
                                            <label for="updatesEnabled" class="ms-Toggle-field">
                                                <span class="ms-Label ms-Label--off">Disabled</span>
                                                <span class="ms-Label ms-Label--on">Enabled</span>
                                            </label>
                                        </div>

                                        <div id="updateBranchSection">
                                            <table>
                                                <tr>
                                                    <td>
                                                        <label class="ms-Label">Channel</label>
                                                    </td>
                                                    <td>
                                                        <i id="updatesBranchInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('updatesBranchInfo', this)"></i>
                                                    </td>
                                                </tr>
                                            </table>
                                            <div class="ms-Dropdown">
                                                <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>
                                                <select id="cbUpdateBranch" class="ms-Dropdown-select">
                                                    <option oldvalue="Business" value="Deferred">Deferred</option>
                                                    <option oldvalue="FirstReleaseBusiness" value="FirstReleaseDeferred">First Release Deferred</option>
                                                    <option oldvalue="Current" value="Current">Current</option>
                                                    <option oldvalue="FirstReleaseCurrent" value="FirstReleaseCurrent">First Release Current</option>
                                                </select>
                                            </div>
                                        </div>

                                        <table>
                                            <tr>
                                                <td>
                                                    <label class="ms-Label">UpdatePath</label>
                                                </td>
                                                <td>
                                                    <i id="updatePathInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('updatePathInfo', this)"></i>
                                                </td>
                                            </tr>
                                        </table>

                                        <div>
                                            <input id="txtUpdatePath" type="text" pattern="\\\\.*\\.*|http://.*|https://|^\w:\\.*"
                                                   class="ms-TextField-field" placeholder="Network, local, or HTTP path"
                                                   data-error="This must be a network, local, or HTTP path">
                                            <span id="updatepathSignal" class="glyphicon form-control-feedback" aria-hidden="true"></span>
                                        </div>

                                        <table>
                                            <tr>
                                                <td>
                                                    <label class="ms-Label">TargetVersion</label>
                                                </td>
                                                <td>
                                                    <i id="targetVersionInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('targetVersionInfo', this)"></i>
                                                </td>
                                            </tr>
                                        </table>

                                        <div>
                                            <div id="updateVersionTextBox">
                                                <input id="txtTargetVersion" type="text" pattern="^\d{2}\.\d\.\d{4}\.\d{4}$" maxlength="14"
                                                       class="ms-TextField-field typeahead" placeholder="15.0.4745.1001"
                                                       data-error="Invalid Version. ex: 15.0.4745.1001">
                                            </div>
                                            <span id="targetversionSignal" class="glyphicon form-control-feedback" aria-hidden="true"></span>
                                        </div>

                                        <div class="ms-DatePicker">
                                        </div>

                                        <div id="autoUpgradeToggle" class="ms-Toggle">
                                            <span class="ms-Toggle-description">Enable Auto Update</span>
                                            <input type="checkbox" id="autoUpgradeEnable" class="ms-Toggle-input" />
                                            <label for="autoUpgradeEnable" class="ms-Toggle-field">
                                                <span class="ms-Label ms-Label--off">Disabled</span>
                                                <span class="ms-Label ms-Label--on">Enabled</span>
                                            </label>
                                            <p class="ms-font-m">
                                                For Enterprise Customers using Office 365 ProPlus, users will be migrated to the latest version in February of 2016.
                                                If you want your users to stay on Office 2013 and continue to receive 2013 security updates, you can delay their migration to
                                                Office 2016 ProPlus.  For more information please visit <a href="http://blogs.technet.com/b/odsupport/archive/2015/09/23/how-can-i-delay-the-migration-from-office-365-proplus-2013-to-office-365-proplus-2016.aspx">this page.</a>
                                            </p>
                                        </div>

                                        <div class="controls">
                                            <button id="btSaveUpdates" class="ms-Button">
                                                Save
                                            </button>
                                            <button id="btRemovesUpdates" class="ms-Button">
                                                Remove
                                            </button>
                                        </div>

                                    </div>
                                    <!-- End Updates Panel -->
                                    <!-- Start Display Panel -->
                                    <div id="DisplayPanel" class="option-panel">
                                        <h1 class="ms-font-xxl">Display</h1>
                                        <div class="ms-Toggle">
                                            <table>
                                                <tr>
                                                    <td>
                                                        <label class="ms-Toggle-description">Display Level</label>
                                                    </td>
                                                    <td>
                                                        <i id="displayLevelInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('displayLevelInfo', this)"></i>
                                                    </td>
                                                </tr>
                                            </table>
                                            <input type="checkbox" id="displayLevel" class="ms-Toggle-input" />
                                            <label for="displayLevel" class="ms-Toggle-field">
                                                <span class="ms-Label ms-Label--off">None</span>
                                                <span class="ms-Label ms-Label--on">Full</span>
                                            </label>
                                        </div>
                                        <div class="ms-Toggle">
                                            <table>
                                                <tr>
                                                    <td>
                                                        <label class="ms-Toggle-description">Accept EULA</label>
                                                    </td>
                                                    <td>
                                                        <i id="acceptEULAInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('acceptEULAInfo', this)"></i>
                                                    </td>
                                                </tr>
                                            </table>
                                            <input type="checkbox" id="acceptEULA" class="ms-Toggle-input" />
                                            <label for="acceptEULA" class="ms-Toggle-field">
                                                <span class="ms-Label ms-Label--off">False</span>
                                                <span class="ms-Label ms-Label--on">True</span>
                                            </label>
                                        </div>

                                        <div class="controls">
                                            <button id="btSaveDisplay" class="ms-Button">
                                                Save
                                            </button>
                                            <button id="btRemoveDisplay" class="ms-Button">
                                                Remove
                                            </button>
                                        </div>
                                    </div>
                                    <!-- End Display Panel -->
                                    <!-- Start Logging Panel -->
                                    <div id="LoggingPanel" class="option-panel">
                                        <h1 class="ms-font-xxl">Logging</h1>
                                        <div class="ms-Toggle">
                                            <div class="ms-Toggle">
                                                <table>
                                                    <tr>
                                                        <td>
                                                            <label class="ms-Toggle-description">Logging Level</label>
                                                        </td>
                                                        <td>
                                                            <i id="logLevelInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('logLevelInfo', this)"></i>
                                                        </td>
                                                    </tr>
                                                </table>
                                                <input type="checkbox" id="loggingLevel" class="ms-Toggle-input" />
                                                <label for="loggingLevel" class="ms-Toggle-field">
                                                    <span class="ms-Label ms-Label--off">Off</span>
                                                    <span class="ms-Label ms-Label--on">Standard</span>
                                                </label>
                                            </div>
                                        </div>
                                        <table>
                                            <tr>
                                                <td>
                                                    <label class="ms-Label">Path</label>
                                                </td>
                                                <td>
                                                    <i id="logPathInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('logPathInfo', this)"></i>
                                                </td>
                                            </tr>
                                        </table>

                                        <div>
                                            <input id="txtLoggingUpdatePath" type="text" pattern="^\w:\\.*"
                                                   class="ms-TextField-field" placeholder="Local Path"
                                                   data-error="Local Path">
                                            <span id="logupdatepathSignal" class="glyphicon form-control-feedback" aria-hidden="true"></span>
                                        </div>

                                        <div style="margin-top:10px">
                                            <button id="btSaveLogging" class="ms-Button">
                                                Save
                                            </button>
                                            <button id="btRemoveLogging" class="ms-Button">
                                                Remove
                                            </button>
                                        </div>
                                    </div>
                                    <!-- End Logging Panel -->
                                    <!-- Start Properties Panel -->
                                    <div id="PropertiesPanel" class="option-panel">
                                        <h1 class="ms-font-xxl">Properties</h1>
                                        <div class="ms-Toggle" style="display:none">
                                            <table>
                                                <tr>
                                                    <td>
                                                        <label class="ms-Toggle-description">AutoActivate</label>
                                                    </td>
                                                    <td>
                                                        <i id="aaInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('aaInfo', this)"></i>
                                                    </td>
                                                </tr>
                                            </table>
                                            <input type="checkbox" id="autoActivate" class="ms-Toggle-input" />
                                            <label for="autoActivate" class="ms-Toggle-field">
                                                <span class="ms-Label ms-Label--off">No</span>
                                                <span class="ms-Label ms-Label--on">Yes</span>
                                            </label>
                                        </div>
                                        <div id="LicenseSection" style="display: none">
                                            <br />
                                        </div>

                                        <div class="ms-Toggle">
                                            <table>
                                                <tr>
                                                    <td>
                                                        <label class="ms-Toggle-description">ForceAppShutdown</label>
                                                    </td>
                                                    <td>
                                                        <i id="fasInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('fasInfo', this)"></i>
                                                    </td>
                                                </tr>
                                            </table>
                                            <input type="checkbox" id="forceAppShutdown" class="ms-Toggle-input" />
                                            <label for="forceAppShutdown" class="ms-Toggle-field">
                                                <span class="ms-Label ms-Label--off">False</span>
                                                <span class="ms-Label ms-Label--on">True</span>
                                            </label>
                                        </div>
                                        <div class="ms-Toggle">
                                            <table>
                                                <tr>
                                                    <td>
                                                        <label class="ms-Toggle-description">SharedComputerLicensing</label>
                                                    </td>
                                                    <td>
                                                        <i id="sclInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px; text-align: center; cursor: pointer;" onclick="toggleInfo('sclInfo', this)"></i>
                                                    </td>
                                                </tr>
                                            </table>
                                            <input type="checkbox" id="sharedComputerLicensing" class="ms-Toggle-input" />
                                            <label for="sharedComputerLicensing" class="ms-Toggle-field">
                                                <span class="ms-Label ms-Label--off">No</span>
                                                <span class="ms-Label ms-Label--on">Yes</span>
                                            </label>
                                        </div>

                                        <div id="pinIconsProperty" class="ms-Toggle">
                                            <table>
                                                <tr>
                                                    <td>
                                                        <label class="ms-Toggle-description">PinIconsToTaskbar</label>
                                                    </td>
                                                    <td>
                                                        <i id="pinIconsIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('pinIconInfo', this)"></i>
                                                    </td>
                                                </tr>
                                            </table>
                                            <input type="checkbox" id="pinIcons" class="ms-Toggle-input" />
                                            <label for="pinIcons" class="ms-Toggle-field">
                                                <span class="ms-Label ms-Label--off">False</span>
                                                <span class="ms-Label ms-Label--on">True</span>
                                            </label>
                                        </div>

                                        <div class="ms-Toggle">
                                            <table>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <label class="ms-Toggle-description">ForceUpgrade</label>
                                                        </td>
                                                        <td>
                                                            <i id="fupInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('fupInfo', this)"></i>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <input type="checkbox" id="forceUpgrade" class="ms-Toggle-input">
                                            <label for="forceUpgrade" class="ms-Toggle-field">
                                                <span class="ms-Label ms-Label--off">False</span>
                                                <span class="ms-Label ms-Label--on">True</span>
                                            </label>
                                        </div>

                                        <table>
                                            <tr>
                                                <td>
                                                    <label class="ms-Label">PACKAGEGUID</label>
                                                </td>
                                                <td>
                                                    <i id="PACKAGEGUIDInfoIcon" class="ms-Icon ms-Icon--circleInfo ms-fontColor-blue" style="width: 30px;text-align: center;cursor:pointer;" onclick="toggleInfo('PACKAGEGUIDInfo', this)"></i>
                                                </td>
                                            </tr>
                                        </table>
                                        <div>
                                            <input id="txtPACKAGEGUID" type="text" pattern="^.{8}-.{4}-.{4}-.{4}-.{12}$"
                                                   class="ms-TextField-field" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
                                                   data-error="This must be a valid APP-V Package Guid" maxlength="36">
                                            <span id="PACKAGEGUIDSignal" class="glyphicon form-control-feedback" aria-hidden="true"></span>
                                        </div>
                                        <div style="margin-top:10px">
                                            <button id="btSaveProperties" class="ms-Button">
                                                Save
                                            </button>
                                            <button id="btRemoveProperties" class="ms-Button">
                                                Remove
                                            </button>
                                        </div>
                                    </div>
                                    <!-- End Properties Panel -->
                                    <!-- Start Templates Panel -->
                                    <div id="TemplatesPanel" class="option-panel">
                                        <h1 class="ms-font-xxl">Templates</h1>
                                        <ul class="ms-List">
                                            <div id="proPlusRetail" class="ms-ListItem is-unread is-selectable" href="./templates/0365ProPlusRetail.xml" onclick="setTemplate(this)">
                                                <span class="ms-ListItem-primaryText">Office 365 ProPlus</span>
                                                <span class="ms-ListItem-tertiaryText" style="word-wrap:break-word;">Silent install of 32-Bit Office 365 ProPlus with Updates and Logging enabled</span>
                                                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
                                            </div>
                                            <div id="proPlusBusiness" class="ms-ListItem is-unread is-selectable" href="./templates/0365ProPlusBusiness.xml" onclick="setTemplate(this)">
                                                <span class="ms-ListItem-primaryText">Office 365 for Business</span>
                                                <span class="ms-ListItem-tertiaryText">Silent install of 32-Bit Office 365 for Business with Updates and Logging enabled</span>
                                                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
                                            </div>
                                            <div id="proPlusRetailVisio" class="ms-ListItem is-unread is-selectable" href="./templates/O365ProPlusRetailwVisio.xml" onclick="setTemplate(this)">
                                                <span class="ms-ListItem-primaryText">Office 365 ProPlus with Visio</span>
                                                <span class="ms-ListItem-tertiaryText">Silent install of 32-Bit Office 365 ProPlus with Visio with Updates and Logging enabled</span>
                                                <div class="ms-ListItem-selectionTarget js-toggleSelection"></div>
                                            </div>
                                        </ul>
                                    </div>
                                    <!-- End Templates Panel -->
                                    <!--Start Generate Install Panel-->
                                    <div id="GenerateInstallPanel" class="option-panel">
                                        <h1 class="ms-font-xxl">Installation Toolkit</h1>
                                        <div class="ms-font-m" style="margin: 0px 10px 0px 10px">
                                            The Install Toolkit is an application that will package an Office 365 ProPlus installation into a single
                                            Executable or Windows Installer Package (MSI) file. The XML configuration file is embedded in the file which allows
                                            you to easily distribute Office 365 ProPlus with a custom configuration.
                                        </div>

                                        <br />

                                        <div class="ms-font-m" style="margin: 0px 10px 0px 10px">
                                            <span style="font-weight: bold;">(New)</span> The Install Toolkit now includes the ability to manage a local workstations Office 365 ProPlus installation. It allows you to install or uninstall Office 365 ProPlus, update your existing installation to the newest version or change the update channel.
                                        </div>

                                        <br />

                                        <div class="ms-font-m" style="margin: 0px 10px 0px 10px">
                                            The Install Toolkit allows you to select installation options. If you would like to use the configuration xml generated by this
                                            website you can export it as an xml file and import it into the application.
                                        </div>

                                        <br />
                                        <div class="ms-font-m" style="margin: 0px 10px 0px 10px">
                                            The Install Tookkit is a desktop application that is installed via Microsoft ClickOnce.  To install the application click the
                                            button below or compile the application yourself using the source code <a href="https://github.com/OfficeDev/Office-IT-Pro-Deployment-Scripts/tree/Development/Office-ProPlus-Deployment/Microsoft.ProPlus.InstallGenerator">here.</a>
                                            <br /><br /><b>Please note that the Install Toolkit requires .Net 4.5 in order to run properly.</b>
                                        </div>


                                        <button type="button" id="btrClickToRun" class="ms-Button ctr-button">Launch Installation</button>
                                    </div>
                                    <!-- End Generate Install Panel -->
                                </div>
                        </td>
                        <td style="vertical-align: top;">
                            <div id="xmlSection" class="Editor-Column" style="width: 500px;">
                                <div id="xmlSec" style="border-left: solid 1px #e5e3e3;height:500px;">
                                    <div class="ms-CommandBar" style="min-width: 500px">

                                        <div class="ms-CommandBar-sideCommands" style="float: left; text-align: left;">
                                            <div class="ms-CommandBarItem">
                                                <div class="ms-CommandBarItem-linkWrapper" onclick="clickUpload();">
                                                    <div class="ms-CommandBarItem-link">
                                                        <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--upload"></span>
                                                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Import</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ms-CommandBarItem">
                                                <div class="ms-CommandBarItem-linkWrapper" onclick="download()">
                                                    <div class="ms-CommandBarItem-link">
                                                        <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--download"></span>
                                                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Export</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ms-CommandBarItem">
                                                <div class="ms-CommandBarItem-linkWrapper">
                                                    <div class="ms-CommandBarItem-link" onclick="clearXml();">
                                                        <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--reload"></span>
                                                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Reset</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ms-CommandBarItem">
                                                <div class="ms-CommandBarItem-linkWrapper">
                                                    <div class="ms-CommandBarItem-link" onclick="sendMail()" style="position: relative">
                                                        <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--mail"></span>
                                                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Email</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ms-CommandBarItem">
                                                <div class="ms-CommandBarItem-linkWrapper">
                                                    <div class="ms-CommandBarItem-link js-togglePanel" onclick="openCommentDialog()" style="position: relative">
                                                        <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--chat"></span>
                                                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Comment</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ms-CommandBarItem">
                                                <div class="ms-CommandBarItem-linkWrapper">
                                                    <div class="ms-CommandBarItem-link" onclick="undoXmlChange()" style="position: relative">
                                                        <span class="ms-CommandBarItem-icon ms-Icon  ms-Icon--reactivate"></span>
                                                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Undo</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ms-CommandBarItem">
                                                <div class="ms-CommandBarItem-linkWrapper">
                                                    <div class="ms-CommandBarItem-link" onclick="redoXmlChange()" style="position: relative">
                                                        <span class="ms-CommandBarItem-icon ms-Icon  ms-Icon--reactivate" style="transform:rotateY(180deg)"></span>
                                                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Redo</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ms-CommandBarItem">
                                                <div class="ms-CommandBarItem-linkWrapper">
                                                    <div class="ms-CommandBarItem-link" onclick="downloadOdt()" style="position: relative">
                                                        <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--download"></span>
                                                        <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Download Office Deployment Tool</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ms-TextField" style="margin-top:0px;margin-left: 30px;">
                                        <pre style="border: white none 0;padding:0px;margin:0px;background-color: white;">
                                        <code id="xmlText" style="height:800px;font-size: 23px;border-width: 0;overflow-y: auto; background-color: white;" readonly onchange="updateXmlHistory()"></code>
                                        </pre>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>

            </div>
        </div>
        <form id="fileuploadform" style="width:200px;display: none;width: 100px;">
            <input type="file" id="fileInput" size="10">
        </form>

    </div>

    <div id="aboutDialog" class="ms-Dialog" style="display:none;position:fixed;width:100%;top:-10%">
        <div class="ms-Overlay"></div>
        <div class="ms-Dialog-main">
            <button class="ms-Dialog-button ms-Dialog-button--close" onclick="hideAbout()">
                <i class="ms-Icon ms-Icon--x"></i>
            </button>
            <div class="ms-Dialog-header">
                <p class="ms-Dialog-title">Office Click-To-Run Configuration XML Editor</p>
            </div>
            <div class="ms-Dialog-inner">
                <div class="ms-Dialog-content">
                    <p class="ms-Dialog-subText">Online Editor for the Office ProPlus Click-To-Run Configurtion XML file</p>
                    <hr>
                    <p class="ms-Dialog-subText">
                        This page provides a graphical method to generate and edit the Office Click-to-Run configuration.xml file
                    </p>
                    <br />
                    <p class="ms-Dialog-subText">
                        <a href="https://technet.microsoft.com/en-us/library/JJ219426.aspx">Reference for Click-to-Run configuration.xml file</a>
                    </p>
                    <br />
                    <p class="ms-Dialog-subText">
                        The Click-to-Run for Office 365 Configuration.xml file is used to specify Click-to-Run installation and update options. The
                        <a href="https://technet.microsoft.com/en-us/library/jj219422.aspx" id="A_2">Office Deployment Tool</a> is a downloadable tool (
                        <a href="http://www.microsoft.com/en-us/download/details.aspx?id=36778">2013</a>, <a href="https://www.microsoft.com/en-us/download/details.aspx?id=49117">2016</a>
                        )
                        that includes a sample Configuration.xml file. Administrators can modify the Configuration.xml file to configure installation options
                        for Click-to-Run for Office 365 products.
                    </p>
                    <br />
                    <p class="ms-Dialog-subText">
                        The Click-to-Run Configuration.xml file is a necessary component of the Office Deployment Tool. Click-to-Run customizations are performed
                        primarily by starting the Office Deployment Tool and providing a custom Configuration.xml file. The Office Deployment Tool performs the tasks
                        that are specified by using the optional properties in the configuration file. For the Office 2013 release of the product, administrators can
                        download the Office Deployment Tool from the <a href="http://go.microsoft.com/fwlink/p/?LinkId=282642" id="A_2">Microsoft Download Center</a>.
                    </p>
                    <hr />
                    <div>
                        <p class="ms-Dialog-subText ms-font-xs ms-fontSize-xs">
                            GitHub Icon made by
                            <a href="http://www.flaticon.com/authors/dave-gandy" title="Dave Gandy">Dave Gandy</a> from
                            <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a>             is licensed by
                            <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC BY 3.0</a>
                        </p>
                    </div>
                </div>
                <div class="ms-Dialog-actions">
                    <div class="ms-Dialog-actionsRight">
                        <button class="ms-Dialog-action ms-Button" onclick="hideAbout()">
                            <span class="ms-Button-label">Close</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div id="welcomeDialog" class="ms-Dialog" style="position:fixed;width:100%;height:90%;display:none">
    <div id="welcomeMain" class="ms-Dialog-main" style="width: 90%; height: 90%; max-width: 1200px;">
        <div id="welcomeHeader" class="ms-Dialog-header ms-bgColor-themeDark ms-bgColor-themeSecondary ms-fontColor-white">
            <!--<i id="dialogNext" class="ms-Icon ms-Icon--arrowRight" style="float: right; height: 10px; font-size: 20px; cursor: pointer;" onclick="dialogNext()"></i>
            <i id="dialogBack" class="ms-Icon ms-Icon--arrowLeft" style="float: right; height: 10px; font-size: 20px; cursor: pointer;display:none" onclick="dialogBack()"></i>-->

            <p class="ms-Dialog-title" style="width: 90%; padding-left: 20px; margin-right: auto">
                Welcome to the Office Click-To-Run Configuration XML Editor
            </p>
        </div>
        <div id="welcomeInner" class="ms-Dialog-inner" style="overflow-y: auto; height: auto; max-height: 90%">
            <div class="ms-Dialog-content" style="width: 98%; padding-left: 20px; padding-top: 20px; height: 100%">
                <div id="disclaimer">
                    <p class="ms-font-l ms-fontWeight-semibold">
                        <img src="images/Warning64.png" alt="Warning" />
                        ALERT: Microsoft releases the new Office Customization Tool for Click-to-Run
                    <p class="ms-font-m">
                        Microsoft released a new web application that enables desktop administrators to customize the deployment of Office 365 applications.  With this the new Office
                        Customization Tool, desktop admins can leverage a rich user interface that helps easily configure deployment options to build the desired Office configurations.
                        <br /><br />
                        The Office Click-to-Run Configuration XML hosted on GitHub has been retired
                        <br /><br />
                        <a style="cursor:pointer" onclick="OpenInNewTab('https://config.office.com')">Click here to use the Office Customization Tool for Click-To-Run</a>
                    </p>
                    </p>
                    <hr />
                    <div class="ms-Dialog-actions" style="width: 98%; margin-right: 30px; bottom: 20px; position: absolute">
                        <div class="ms-Dialog-actionsRight">
                            <!--<button class="ms-Dialog-action ms-Button" onclick="hideWelcome();">
                                <span class="ms-Button-label">Close</span>
                            </button>
                            <button class="ms-Dialog-action ms-Button" onclick="dialogNext()">
                                <span class="ms-Button-label">Next</span>
                            </button>-->
                        </div>
                    </div>
                </div>

                <div id="info" style="display: none;">
                    <p class="ms-font-m">
                        This page provides a graphical method to generate and edit the Office Click-to-Run configuration.xml file. The configuration.xml file is used to specify Click-to-Run installation and update options.
                    </p>
                    <br />
                    <p class="ms-font-m">
                        <a style="cursor:pointer" onclick="OpenInNewTab('https://technet.microsoft.com/en-us/library/JJ219426.aspx')">Reference for Click-to-Run configuration.xml file</a>
                    </p>
                    <br />
                    <p class="ms-font-m">
                        The <a style="cursor:pointer" onclick="OpenInNewTab('https://technet.microsoft.com/en-us/library/jj219422.aspx')" id="A_2">Office Deployment Tool</a> is a downloadable tool.
                        (<a style="cursor:pointer" onclick="OpenInNewTab('https://www.microsoft.com/en-us/download/details.aspx?id=49117')">Office 365 ProPlus 2016</a>,
                        <a style="cursor:pointer" onclick="OpenInNewTab('http://www.microsoft.com/en-us/download/details.aspx?id=36778')">Office 365 ProPlus 2013</a>)
                    </p>
                    <br />
                    <hr />
                    <p class="ms-font-xl" style="margin-top: 10px">How to use this site</p>

                    <p class="ms-font-l" style="margin-top: 10px">Start</p>
                    <p class="ms-font-m">
                        <ul class="ms-font-m">
                            <li>Start a new configuration XML</li>
                            <li>Upload an existing XML file</li>
                            <li>Select an available Template</li>
                        </ul>
                    </p>

                    <br />

                    <p class="ms-font-l" style="margin-top: 10px">Configure</p>
                    <p class="ms-font-m">
                        <ul class="ms-font-m">
                            <li>Add or Remote Office Products</li>
                            <li>Configure Updates</li>
                            <li>Control installation behavior</li>
                        </ul>
                    </p>

                    <br />

                    <p class="ms-font-l" style="margin-top: 10px">Save</p>
                    <p class="ms-font-m">
                        <ul class="ms-font-m">
                            <li>Download the file,
                            <li>Email it
                            <li>Copy the text to save it.</li>
                        </ul>
                    </p>

                    <hr />

                    <p class="ms-font-m">
                        For more scripts and tools for automating Office ProPlus deployments you can go to the <a style="cursor:pointer" onclick="OpenInNewTab('https://github.com/OfficeDev/Office-IT-Pro-Deployment-Scripts')" id="A_2">Office IT Pro Deployment Scripts</a>
                        respository in the <a style="cursor:pointer" onclick="OpenInNewTab('https://github.com/OfficeDev')" id="A_2">OfficeDev</a> GitHub Site.


                    </p>

                    <div class="ms-Dialog-actions" style="width: 98%; margin-right: 30px; bottom: 20px; position: absolute">
                        <div class="ms-Dialog-actionsRight">
                           <!-- <button class="ms-Dialog-action ms-Button" onclick="foreverHideWelcome();">
                                <span class="ms-Button-label">Don't Show This Again</span>
                            </button>
                            <button class="ms-Dialog-action ms-Button" onclick="hideWelcome();">
                                <span class="ms-Button-label">Close</span>
                            </button> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <div id="commentDialog" class="ms-Dialog" style="display:none;position:fixed;width:100%;top:-100%">
        <div class="ms-Overlay"></div>
        <div class="ms-Dialog-main" style="min-width:50%">
            <button class="ms-Dialog-button ms-Dialog-button--close" onclick="hideCommentDialog()">
                <i class="ms-Icon ms-Icon--x"></i>
            </button>
            <div class="ms-Dialog-header">
                <p class="ms-Dialog-title">Add Comment</p>
            </div>
            <div class="ms-Dialog-inner">

                <div class="ms-Dialog-actions">
                    <div class="ms-Dialog-actionsRight">
                        <button class="ms-Dialog-action ms-Button" onclick="hideCommentDialog()">
                            <span class="ms-Button-label">Cancel</span>
                        </button>
                        <button id="addCommentbt" class="ms-Dialog-action  ">
                            <span class="ms-Button-label">Add Comment</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="infoOverlay" style="position:absolute;height:100%;width:100%;display:none;top:0;" onclick="hideAllCallOuts()">
        <div id="productInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:80px; top:40px; display:none;">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('productInfo')"></span>
                    <p class="ms-Callout-title">Office Product</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">Specifies the Click-to-Run product to install.</p>
                        <hr>
                        <p class="ms-Callout-subText">Required. <strong>ID</strong> must be set to a valid ProductRelease ID.</p>
                        <br />
                        <p class="ms-Callout-subText">The supported ProductRelease IDs for Click-to-Run for Office 365 products are as follows:</p>
                        <ul>
                            <li> <p class="ms-Callout-subText">O365ProPlusRetail</p> </li>
                            <li> <p class="ms-Callout-subText">O365BusinessRetail</p> </li>
                            <li> <p class="ms-Callout-subText">VisioProRetail</p> </li>
                            <li><p class="ms-Callout-subText">ProjectProRetail</p> </li>

                            <li>
                                <p class="ms-Callout-subText">VisioProXVolume</p>
                            </li>
                            <li>
                                <p class="ms-Callout-subText">VisioStdXVolume</p>
                            </li>
                            <li>
                                <p class="ms-Callout-subText">ProjectProXVolume</p>
                            </li>
                            <li>
                                <p class="ms-Callout-subText">ProjectStdXVolume</p>
                            </li>

                        </ul>
                        <p class="ms-Callout-subText">If <strong>ID</strong> is not set, the operation fails and indicates that the input is not valid.</p>
                        <br />
                        <p class="ms-Callout-subText">The order of <strong>Product</strong> elements determines the order in which the products are installed. The first <strong>Product ID</strong> is used to determine in which context the Microsoft Office First Run Experience application starts. Microsoft Office First Run Experience refers to the first time each Office application starts.</p>
                    </div>
                </div>
            </div>
        </div>

        <div id="versionInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:80px; top:100px; display:none;">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('versionInfo')"></span>
                    <p class="ms-Callout-title">Product Version</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">The Version of the Click-to-Run product to installation</p>
                        <hr>
                        <p class="ms-Callout-subText">Optional. If a <strong>Version</strong> value is not set, the Click-to-Run product installation streams the latest available version from the source. The default is to use the most recently advertised build (as defined in v32.CAB or v64.CAB at the Click-to-Run Office installation source). </p>
                        <br />
                        <p class="ms-Callout-subText"> <strong>Version</strong> can be set to an Office 2013 build number by using this format: X.X.X.X</p>
                        <br />
                        <p class="ms-Callout-subText">For more information on the specific versions of Office Click-To-Run see <a href="https://support.microsoft.com/en-us/gp/office-2013-365-update">Update Office 2013 or Office 365</a></p>
                    </div>
                </div>
            </div>
        </div>

        <div id="branchInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:75px; top:115px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('branchInfo')"></span>
                    <p class="ms-Callout-title">Office Branch</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">
                            One of the benefits of Office 365 ProPlus is that Microsoft can provide new features for Office apps on a regular basis, through monthly updates. However, as the admin who deploys Office 365 ProPlus to the users in your organization, you might want to have more control over how often your users get these new features. For the Office 2016 version of Office 365 ProPlus, Microsoft provides you three options, called update branches, to control how often Office 365 ProPlus is updated with new features. Here's an overview of the three options.
                        </p>
                        <p>
                            <a href="https://technet.microsoft.com/en-us/library/mt455210.aspx">Overview of update branches for Office 365 ProPlus</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="updatesBranchInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:75px; top:115px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('updatesBranchInfo')"></span>
                    <p class="ms-Callout-title">Office Branch</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">
                            One of the benefits of Office 365 ProPlus is that Microsoft can provide new features for Office apps on a regular basis, through monthly updates. However, as the admin who deploys Office 365 ProPlus to the users in your organization, you might want to have more control over how often your users get these new features. For the Office 2016 version of Office 365 ProPlus, Microsoft provides you three options, called update branches, to control how often Office 365 ProPlus is updated with new features. Here's an overview of the three options.
                        </p>
                        <p>
                            <a href="https://technet.microsoft.com/en-us/library/mt455210.aspx">Overview of update branches for Office 365 ProPlus</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="pidkeyInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:75px; top:472px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('pidkeyInfo')"></span>
                    <p class="ms-Callout-title">PIDKEY</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">The 25-character volume license key.</p>
                        <hr>
                        <p class="ms-Callout-subText">Optional. </p>

                        <p class="ms-Callout-subText">When the <strong>PIDKEY</strong> value is set, users are not required to enter a product key when they install Office.</p>
                        <br />
                        <p class="ms-Callout-subText">If this element is not defined, the default settings are used. If an invalid value is specified, Setup ends the installation. </p>
                        <br />
                        <p class="ms-Callout-subText">If the <strong>Level</strong> attribute is set to "basic" or “none” and you supply a product key by using the <strong>PIDKEY</strong>, Setup assumes that you also accept the license agreement on behalf of the user.</p>
                    </div>
                </div>
            </div>
        </div>

        <div id="editionInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:75px; top:115px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('editionInfo')"></span>
                    <p class="ms-Callout-title">Office Client Edition</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">Required. Specifies the edition of Click-to-Run for Office 365 product to use: 32- or 64-bit. The action fails if <strong>OfficeClientEdition</strong> is not set to a valid value.</p>
                        <br />
                        <p class="ms-Callout-subText">A <strong>configure</strong> mode action may fail if <strong>OfficeClientEdition</strong> is set incorrectly. For example, if you attempt to install a 64-bit edition of a Click-to-Run for Office 365 product on a computer that is running a 32-bit Windows operating system, or if you try to install a 32-bit Click-to-Run for Office 365 product on a computer that has a 64-bit edition of Office installed.</p>
                    </div>
                </div>
            </div>
        </div>

        <div id="languageInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:90px; top:188px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('languageInfo')"></span>
                    <p class="ms-Callout-title">Product Language</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">Determine which product languages to install.</p>
                        <hr>
                        <p class="ms-Callout-subText">Required. If the <strong>Language ID</strong> value is not set, the installation operation fails and indicates that the input is not valid.</p>
                        <br />
                        <p class="ms-Callout-subText">The <strong>ID</strong> value can be set to a valid Office culture language (such as en-us for English US or ja-jp for Japanese). The <em>ll-cc</em> value is the language identifier. </p>
                        <br />
                        <p class="ms-Callout-subText">
                            Language elements determine which product languages to install. Administrators must specify the languages they want to install. The first language determines the Shell UI culture. The Shell UI is the language of shortcuts, right-click context menus, and tooltips.
                        </p>
                        <br />
                        <p class="ms-Callout-subText">
                            If you decide that you want to change the Shell UI language after an initial installation, you have to uninstall Click-to-Run and reinstall. Add the language that you want to set for the Shell UI as the first language in the custom Configuration.xml file.
                        </p>
                    </div>
                </div>
            </div>
        </div>

    <div id="srcPathInfo" class="ms-Callout ms-Callout--arrowLeft" style="position: absolute; left: 98px; top: 408px; display: none;">
        <div class="ms-Callout-main">
            <div class="ms-Callout-header">
                <span style="float: right; cursor: pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('srcPathInfo')"></span>
                <p class="ms-Callout-title">Source Path</p>
            </div>
            <div class="ms-Callout-inner">
                <div class="ms-Callout-content">
                    <p class="ms-Callout-subText">Indicates the location to save the Click-to-Run installation source when you run the Office Deployment Tool in download mode.</p>
                    <hr>
                    <p class="ms-Callout-subText">Optional. </p>
                    <p class="ms-Callout-subText">The <strong>SourcePath</strong> value can be set to a network, local, or HTTP path that contains a Click-to-Run source. Environment variables can be used for network or local paths.
                    </p>
                    <br/>
                    <p class="ms-Callout-subText"> <strong>SourcePath</strong> indicates the location to save the Click-to-Run installation source when you run the Office Deployment Tool in <strong>download</strong> mode.
                    </p>
                    <br/>
                    <p class="ms-Callout-subText"> <strong>SourcePath</strong> indicates the installation source path from which to install Office when you run the Office Deployment Tool in <strong>configure</strong> mode. If you don’t specify <strong>SourcePath</strong> in <strong>configure</strong> mode, Setup will look in the current folder for the Office source files. If the Office source files aren’t found in the current folder, Setup will look on Office 365 for them.
                    </p>
                    <br/>
                    <p class="ms-Callout-subText"> <strong>SourcePath</strong> specifies the path of the Click-to-Run Office source from which the App-V package will be made when you run the Office Deployment Tool in <strong>packager</strong> mode.
                    </p>
                    <br/>
                    <p class="ms-Callout-subText">If you do not specify <strong>SourcePath</strong>, Setup will attempt to create an <strong>\Office\Data\...</strong> folder structure in the working directory from which you are running setup.exe.
                    </p>
                </div>
            </div>
        </div>
    </div>

        <div id="dwnPathInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:98px; top:408px; display:none;">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('dwnPathInfo')"></span>
                    <p class="ms-Callout-title">Download Path</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">Indicates the location to that the Click-to-Run installation will download content from during installation.</p>
                        <hr>
                        <p class="ms-Callout-subText">Optional. </p>
                        <p class="ms-Callout-subText">The <strong>DownloadPath</strong> value can be set to a network, local, or HTTP path that contains a Click-to-Run source. Environment variables can be used for network or local paths.</p>
                        <br />
                        <p class="ms-Callout-subText"> <strong>DownloadPath</strong> indicates the installation source path from which to install Office when you run the Office Deployment Tool in <strong>configure</strong> mode. If you don’t specify <strong>DownloadPath</strong> in <strong>configure</strong> mode, Setup will look in the current folder for the Office source files. If the Office source files aren’t found in the current folder, Setup will look on Office 365 for them.</p>
                        <br />
                        <p class="ms-Callout-subText">If you do not specify <strong>DownloadPath</strong>, Setup will attempt to download the files required for installation from the CDN.</p>
                    </div>
                </div>
            </div>
        </div>

        <div id="removeProductInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:80px; top:40px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('removeProductInfo')"></span>
                    <p class="ms-Callout-title">Remove Products</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">Removes products and languages.</p>
                        <hr>
                        <p class="ms-Callout-subText"><strong>Important:</strong></p>
                        <p class="ms-Callout-subText">
                            To remove an installed language for a product, you must specify the ID for the product, and specify the ID for the language that you want to remove. To remove a product completely, you must specify the ID for the product, and specify the IDs of all the languages that are installed. But, if the product and languages are also specified in the <a href="#BKMK_AddElement" id="A_10">Add element</a> of the configuration.xml file, then the product or languages won’t be removed.
                        </p>
                        <br />
                        <p class="ms-Callout-subText">
                            If <strong>All</strong> is set to <strong>TRUE</strong>, then all products and languages are removed, regardless of what is specified in the <strong>Add element</strong>.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="exclAppInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:150px; top:510px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('exclAppInfo')"></span>
                    <p class="ms-Callout-title">ExcludeApp</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">Specifies which Office programs not to install.</p>
                        <hr>
                        <p class="ms-Callout-subText">Optional. </p>
                        <p class="ms-Callout-subText">The following is a list of the supported values for <strong>ID</strong>:</p>
                        <ul>
                            <li> <p class="ms-Callout-subText">Access</p> </li>
                            <li> <p class="ms-Callout-subText">Excel</p> </li>
                            <li> <p class="ms-Callout-subText">Groove</p> </li>
                            <li> <p class="ms-Callout-subText">InfoPath</p> </li>
                            <li> <p class="ms-Callout-subText">Lync</p> </li>
                            <li> <p class="ms-Callout-subText">OneNote</p> </li>
                            <li> <p class="ms-Callout-subText">Outlook</p> </li>
                            <li> <p class="ms-Callout-subText">PowerPoint</p> </li>
                            <li> <p class="ms-Callout-subText">Project</p> </li>
                            <li> <p class="ms-Callout-subText">Publisher</p> </li>
                            <li> <p class="ms-Callout-subText">Visio</p> </li>
                            <li> <p class="ms-Callout-subText">Word</p> </li>
                        </ul>
                        <p class="ms-Callout-subText">The value “Groove” is used to exclude OneDrive for Business.</p>
                        <p class="ms-Callout-subText">The value "Lync" also applies to Skype for Business.</p>
                    </div>
                </div>
            </div>
        </div>

        <div id="updatePathInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:80px; top:40px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('updatePathInfo')"></span>
                    <p class="ms-Callout-title">Update Path</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">Specifies a network, local, or HTTP path of a Click-to-Run source.</p>
                        <hr>
                        <p class="ms-Callout-subText">
                            Optional.
                        </p>
                        <p class="ms-Callout-subText">
                            If <strong>UpdatePath</strong> is not set, Click-to-Run installations obtain updates from the Microsoft Click-to-Run source (Content Delivery Network or CDN). This is by default. If <strong>UpdatePath</strong> is set to empty (""), updates are obtained from the Microsoft Click-to-Run source, CDN.
                        </p>
                        <br />
                        <p class="ms-Callout-subText">
                            <strong>UpdatePath</strong> can specify a network, local, or HTTP path of a Click-to-Run source. Environment variables can be used for network or local paths. If you use Group Policy and the <a href="http://go.microsoft.com/fwlink/p/?LinkID=257051" id="A_10">Office 2013 Administrative Template files (ADMX/ADML)</a>, you can set <strong>UpdatePath</strong> by using the <strong>Update Path</strong> policy setting. You can find this policy setting under Computer Configuration\Administrative Templates\Microsoft Office 2013 (Machine)\Updates.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="targetVersionInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:80px; top:40px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('targetVersionInfo')"></span>
                    <p class="ms-Callout-title">Remove Products</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">The Click-to-Run product version to install.</p>
                        <hr>
                        <p class="ms-Callout-subText">
                            Optional.
                        </p>
                        <p class="ms-Callout-subText">
                            If <strong>TargetVersion</strong> is not set, Click-to-Run updates to the most recent version from the Microsoft Click-to-Run source. If <strong>TargetVersion</strong> is set to empty (""), Click-to-Run updates to the latest version from the Microsoft Click-to-Run source.
                        </p>
                        <br />
                        <p class="ms-Callout-subText">
                            <strong>TargetVersion</strong> can be set to an Office build number, for example, 15.1.2.3. When the version is set, Office attempts to transition to the specified version in the next update cycle. If you use Group Policy and the <a href="http://go.microsoft.com/fwlink/p/?LinkID=257051" id="A_9">Office 2013 Administrative Template files (ADMX/ADML)</a>, you can set <strong>TargetVersion</strong> by using the <strong>Target Version</strong> policy setting. You can find this policy setting under Computer Configuration\Administrative Templates\Microsoft Office 2013 (Machine)\Updates.
                        </p>
                        <br />
                        <p class="ms-Callout-subText">
                            For more information on the specific versions of Office Click-To-Run see <a href="https://support.microsoft.com/en-us/gp/office-2013-365-update">Update Office 2013 or Office 365</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="editionInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:75px; top:115px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('editionInfo')"></span>
                    <p class="ms-Callout-title">Office Branch</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">Required. Specifies the edition of Click-to-Run for Office 365 product to use: 32- or 64-bit. The action fails if <strong>OfficeClientEdition</strong> is not set to a valid value.</p>
                        <br />
                        <p class="ms-Callout-subText">A <strong>configure</strong> mode action may fail if <strong>OfficeClientEdition</strong> is set incorrectly. For example, if you attempt to install a 64-bit edition of a Click-to-Run for Office 365 product on a computer that is running a 32-bit Windows operating system, or if you try to install a 32-bit Click-to-Run for Office 365 product on a computer that has a 64-bit edition of Office installed.</p>
                    </div>
                </div>
            </div>
        </div>

        <div id="deadlineInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:80px; top:40px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('deadlineInfo')"></span>
                    <p class="ms-Callout-title">Deadline</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">Sets a deadline by when updates to Office must be applied. The deadline is specified in Coordinated Universal Time (UTC).</p>
                        <hr>
                        <p class="ms-Callout-subText">
                            Optional.
                        </p>
                        <p class="ms-Callout-subText">
                            Sets a deadline by when updates to Office must be applied. The deadline is specified in Coordinated Universal Time (UTC). You can use <strong>Deadline</strong> with <strong>Target Version</strong> to make sure that Office is updated to a particular version by a particular date.
                        </p>
                        <br />
                        <p class="ms-Callout-subText">
                            We recommend that you set the deadline at least a week in the future to allow users time to install the updates. Prior to the deadline, users receive multiple reminders to install the updates. If Office isn’t updated by the deadline, users see a notification that the updates will be applied in 15 minutes. This gives users the opportunity to save the Office documents that they are working on and to close any Office programs that are open. If users don’t close the Office programs, the programs are closed automatically when the 15 minutes are up, which might result in data loss. After the Office programs are closed, the updates are applied automatically.
                        </p>
                        <br />
                        <p class="ms-Callout-subText">
                            The deadline only applies to one set of updates. If you want to use a deadline to make sure that Office is always up-to-date, you must change the deadline every time that a new update for Office is available. To use this attribute, Office must be running at least Service Pack 1 (version 15.0.4569.1507) and you must use at least version 15.0.4595.1000 of the Office Deployment Tool. If you use Group Policy and the <a href="http://go.microsoft.com/fwlink/p/?LinkID=257051">Office 2013 Administrative Template files (ADMX/ADML)</a>, you can set <strong>Deadline</strong> by using the <strong>Update Deadline</strong> policy setting. You can find this policy setting under Computer Configuration\Administrative Templates\Microsoft Office 2013 (Machine)\Updates.
                        </p>

                    </div>
                </div>
            </div>
        </div>

        <div id="displayLevelInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:80px; top:40px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('displayLevelInfo')"></span>
                    <p class="ms-Callout-title">Display Level</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">Determines the user interface that the user sees when the operation is performed.</p>
                        <hr>
                        <p class="ms-Callout-subText">
                            Optional.
                        </p>
                        <p class="ms-Callout-subText">
                            If <strong>Level</strong> is set to <strong>None</strong>, the user sees no UI. No progress UI, completion screen, error dialog boxes, or first run automatic start UI are displayed. If <strong>Level</strong> is set to <strong>Full</strong>, the user sees the normal Click-to-Run user interface: Automatic start, application splash screen, and error dialog boxes.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="acceptEULAInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:80px; top:40px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('acceptEULAInfo')"></span>
                    <p class="ms-Callout-title">Accept EULA</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">We recommend that administrators set AcceptEULA to TRUE.</p>
                        <hr>
                        <p class="ms-Callout-subText">
                            Optional.
                        </p>
                        <p class="ms-Callout-subText">
                            If this attribute is set to <strong>TRUE</strong>, the user does not see a Microsoft Software License Terms dialog box. If this attribute is set to <strong>FALSE</strong> or is not set, the user may see a Microsoft Software License Terms dialog box. This attribute only applies if you install with the user's account. If you use System Center Configuration Manager or some other software distribution tool which uses the SYSTEM account to install, then the setting for this attribute is not applied.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="logLevelInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:80px; top:40px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('logLevelInfo')"></span>
                    <p class="ms-Callout-title">Log Level</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">Specifies options for the logging that Click-to-Run Setup performs.</p>
                        <hr>
                        <p class="ms-Callout-subText">
                            Optional.
                        </p>
                        <p class="ms-Callout-subText">
                            The default level is Standard.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="logPathInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:80px; top:40px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('logPathInfo')"></span>
                    <p class="ms-Callout-title">Log Path</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">Specifies the fully qualified path of the folder that is used for the log file.</p>
                        <hr>
                        <p class="ms-Callout-subText">
                            Optional.
                        </p>
                        <p class="ms-Callout-subText">
                            You can use environment variables. The default is <strong>%temp%</strong>.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="aaInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:80px; top:40px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('aaInfo')"></span>
                    <p class="ms-Callout-title">AUTOACTIVATE</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">Specified products will attempt to activate automatically.</p>
                        <hr>
                        <p class="ms-Callout-subText">
                            If <strong>AUTOACTIVATE</strong> is set to 1, the specified products will attempt to activate automatically. If <strong>AUTOACTIVATE</strong> is not set, the user may see the Activation Wizard UI.
                        </p>
                        <br />
                        <p class="ms-Callout-subText">
                            <strong>Note:</strong> Office 365 Click-to-Run products are already set to activate automatically. You must not set <strong>AUTOACTIVATE</strong> for Office 365 Click-to-Run products. This setting applies only to perpetual retail versions of Click-to-Run products.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="fasInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:80px; top:40px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('fasInfo')"></span>
                    <p class="ms-Callout-title">FORCEAPPSHUTDOWN</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText"> Forces the applications that block the action to be shut down.</p>
                        <hr>
                        <p class="ms-Callout-subText">
                            An installation or removal action may be blocked if Office applications are running. Normally, such cases would start a process killer UI.
                            Administrators can set <strong>FORCEAPPSHUTDOWN</strong> value to <strong>TRUE</strong> to prevent dependence
                            on user interaction. When <strong>FORCEAPPSHUTDOWN</strong> is set to <strong>TRUE</strong>, any applications
                            that block the action will be shut down. Data loss may occur. When <strong>FORCEAPPSHUTDOWN</strong> is set to
                            <strong>FALSE</strong> (default), the action may fail if Office applications are running.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="sclInfo" class="ms-Callout ms-Callout--arrowLeft" style="position: absolute; left: 80px; top: 40px; display: none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float: right; cursor: pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('sclInfo')"></span>
                    <p class="ms-Callout-title">SharedComputerLicensing</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText"> Forces the applications that block the action to be shut down.</p>
                        <hr>
                        <p class="ms-Callout-subText">Optional. </p>
                        <p class="ms-Callout-subText">
                            Set <strong id="STRONG_3">SharedComputerLicensing</strong> to 1 if you deploy Office 365 ProPlus to shared computers by using Remote Desktop Services.
                            For more information, see
                            <a href="https://technet.microsoft.com/en-us/library/dn782860.aspx">Overview of shared computer activation for Office 365 ProPlus</a>.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="pinIconInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:80px; top:40px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('pinIconInfo')"></span>
                    <p class="ms-Callout-title">PinIcons</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">Controls wether or not Icons are pinned to the taskbar. (Doesn't apply to Windows 10)</p>
                        <hr>
                        <p class="ms-Callout-subText">Optional. </p>
                        <p class="ms-Callout-subText">
                            Set <strong id="STRONG_3">PinIcons</strong> to FALSE if you do not want the Office icons pinned to the taskbar
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="PACKAGEGUIDInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:80px; top:40px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('PACKAGEGUIDInfo')"></span>
                    <p class="ms-Callout-title">PACKAGEGUID</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">App-V Package ID.</p>
                        <hr>
                        <p class="ms-Callout-subText">Optional. </p>
                        <p class="ms-Callout-subText">
                            By default, all Office 2013 App-V packages created by using the Office Deployment Tool share the same App-V Package ID. Administrators can use <strong>PACKAGEGUID</strong> to specify a different Package ID. You can only use the following characters for <strong>PACKAGEGUID</strong>:
                        </p>
                        <ul>
                            <li>
                                <p class="ms-Callout-subText">
                                    0, 1, 2, 3, 4, 5, 6, 7, 8, 9
                                </p>
                            </li>
                            <li>
                                <p class="ms-Callout-subText">
                                    A, B, C, D, E, F
                                </p>
                            </li>
                        </ul>
                        <p class="ms-Callout-subText">
                            If you use any other characters, the App-V package is created with the default Package ID. Also, <strong>PACKAGEGUID</strong> needs to be 25 characters in length and be separated into 5 sections, with each section separated by a dash. The sections need to have the following number of characters: 8, 4, 4, 4, and 12. For example, 12345678-ABCD-1234-ABCD-1234567890AB is a valid value for <strong>PACKAGEGUID</strong>. This allows you to publish multiple App-V packages of Office 2013 to an App-V Management Server. But, this doesn’t enable you to deploy more than one Office 2013 App-V package to a single computer.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div id="fupInfo" class="ms-Callout ms-Callout--arrowLeft" style="position:absolute; left:80px; top:40px; display:none">
            <div class="ms-Callout-main">
                <div class="ms-Callout-header">
                    <span style="float:right; cursor:pointer" class="ms-Icon ms-Icon--x" onclick="toggleInfo('fupInfo')"></span>
                    <p class="ms-Callout-title">ForceUpgrade</p>
                </div>
                <div class="ms-Callout-inner">
                    <div class="ms-Callout-content">
                        <p class="ms-Callout-subText">When set to True, ForceUpgrade automatically upgrades from Office 365 ProPlus 2013 to Office 365 ProPlus 2016 without asking for input from the user. This attribute is often used alongside the Display element to hide the user interface during installation.</p>
                        <hr>
                        <p class="ms-Callout-subText">Optional. </p>
                        <p class="ms-Callout-subText">
                            Default is False.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ms-Panel">
        <div class="ms-Overlay ms-Overlay--dark js-togglePanel"></div>
        <div class="ms-Panel-main">
            <div class="ms-Panel-commands">
                <div class="ms-CommandBar">
                    <div class="ms-CommandBar-sideCommands">
                        <div class="ms-CommandBarItem">
                            <div class="ms-CommandBarItem-linkWrapper">
                                <div class="ms-CommandBarItem-link js-togglePanel" onclick="addComment()" style="position: relative">
                                    <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--save"></span>
                                    <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Save</span>
                                </div>
                            </div>
                        </div>
                        <div class="ms-CommandBarItem">
                            <div class="ms-CommandBarItem-linkWrapper">
                                <div class="ms-CommandBarItem-link js-togglePanel" onclick="deleteComment()" style="position: relative">
                                    <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--trash"></span>
                                    <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Delete</span>
                                </div>
                            </div>
                        </div>
                        <div class="ms-CommandBarItem">
                            <div class="ms-CommandBarItem-linkWrapper">
                                <div class="ms-CommandBarItem-link js-togglePanel" style="position: relative">
                                    <span class="ms-CommandBarItem-icon ms-Icon ms-Icon--xCircle"></span>
                                    <span class="ms-CommandBarItem-commandText ms-font-m ms-font-weight-regular">Cancel</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ms-Panel-contentInner">
                <p class="ms-Dialog-subText" style="font-size: 14px">Add a comment to the XML file</p>
                <p class="ms-Dialog-subText">Comment:</p>
                <textarea id="commentText" class="ms-TextField-field ms-TextField--multiline"
                          style="height:300px;font-size: 16px;overflow-y: auto"></textarea>
            </div>
        </div>
    </div>

    <div id="confirmDelete" class="ms-Dialog" style="display:none;position:fixed;width:100%;top:-100%">
        <div class="ms-Overlay"></div>
        <div class="ms-Dialog-main">
            <button class="ms-Dialog-button ms-Dialog-button--close">
                <i class="ms-Icon ms-Icon--x"></i>
            </button>
            <div class="ms-Dialog-header">
                <p class="ms-Dialog-title">All emails together</p>
            </div>
            <div class="ms-Dialog-inner">
                <div class="ms-Dialog-content">
                    <p class="ms-Dialog-subText">Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.</p>
                    <div class="ms-ChoiceField">
                        <input id="demo-checkbox-unselected1" class="ms-ChoiceField-input" type="checkbox">
                        <label for="demo-checkbox-unselected1" class="ms-ChoiceField-field"><span class="ms-Label">Option1</span></label>
                    </div>
                    <div class="ms-ChoiceField">
                        <input id="demo-checkbox-unselected2" class="ms-ChoiceField-input" type="checkbox">
                        <label for="demo-checkbox-unselected2" class="ms-ChoiceField-field"><span class="ms-Label">Option2</span></label>
                    </div>
                </div>
                <div class="ms-Dialog-actions">
                    <div class="ms-Dialog-actionsRight">
                        <button class="ms-Dialog-action ms-Button ms-Button--primary">
                            <span class="ms-Button-label">Save</span>
                        </button>
                        <button class="ms-Dialog-action ms-Button">
                            <span class="ms-Button-label">Cancel</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id='screen' style="width: 100%">
    </div>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
    <script type="text/javascript" src="./Scripts/FileSaver.js"></script>
    <script type="text/javascript" src="./Scripts/new-main.js"></script>

    <script type="text/javascript" src="//1000hz.github.io/bootstrap-validator/dist/validator.min.js"></script>
    <script type="text/javascript" src="./Scripts/jquery.fabric.min.js"></script>
    <script type="text/javascript" src="./components/Panel/Jquery.Panel.js"></script>

    <script>
        $(document).ready(function () {
            $("#pidKeyLabel").hide();

            if ($('.ms-FilePicker').length > 0) {
                $('.ms-FilePicker').css({
                    "position": "absolute !important"
                });

                $('.ms-Dropdown').FilePicker();
                $('.ms-Toggle').FilePicker();
                $('.ms-Table').FilePicker();
                $('.ms-DatePicker').FilePicker();
            } else {
                if ($.fn.Dropdown) {
                    $('.ms-Dropdown').Dropdown();
                }
                if ($.fn.Toggle) {
                    $('.ms-Toggle').Toggle();
                }
                if ($.fn.Table) {
                    $('.ms-Table').Table();
                }
                if ($.fn.DatePicker) {
                    var myDatepicker = $('.ms-DatePicker').DatePicker({
                        label: "Deadline"
                    });
                }

                if ($.fn.Panel) {
                    $('.ms-Panel').Panel();
                }

                if ($.fn.Dialog) {
                    $('.ms-Dialog').Dialog();
                }

                if ($.fn.List) {
                    $('.ms-List').List();
                }
            }

            if (fabric && fabric['Dropdown']) {
                var component, componentHolder;
                componentHolder = document.querySelector('.component-holder');

                if (componentHolder) {
                    component = new fabric.Spinner(componentHolder);
                }
            }
            if (fabric && fabric['Toggle']) {
                var component, componentHolder;
                componentHolder = document.querySelector('.component-holder');

                if (componentHolder) {
                    component = new fabric.Spinner(componentHolder);
                }
            }
            if (fabric && fabric['Table']) {
                var component, componentHolder;
                componentHolder = document.querySelector('.component-holder');

                if (componentHolder) {
                    component = new fabric.Spinner(componentHolder);
                }
            }
            if (fabric && fabric['DatePicker']) {
                var component, componentHolder;
                componentHolder = document.querySelector('.component-holder');

                if (componentHolder) {
                    component = new fabric.Spinner(componentHolder);
                }
            }
            //Corrections to bad datepicker behavior (from UI Fabric)
            var $monthPicker = $('.ms-DatePicker-monthPicker');
            var $monthControls = $('.ms-DatePicker-monthComponents');
            var $yearControls = $('.ms-DatePicker-monthComponents');
            var $decadeControls = $('.ms-DatePicker-decadeComponents');
            var $yearPicker = $('.ms-DatePicker-yearPicker');
            var $picker = myDatepicker.find('.ms-TextField-field').pickadate('picker');

            /** Switch to the is-pickingMonths state. */
            $monthPicker.on('click', '.js-showMonthPicker', function (event) {
                myDatepicker.toggleClass('is-pickingMonths');
                myDatepicker.toggleClass('is-pickingYears');
            });

            $monthControls.on('click', '.js-showMonthPicker', function (event) {
                //fix disappearing box behavior
                myDatepicker.toggleClass('is-pickingMonths');

                //check to see if trying to click previous month icon
                var $prevClickIcon = $('.js-prevMonth');
                var X = (event.pageX);
                var Y = (event.pageY);
                if (($prevClickIcon.offset().left < X) && (($prevClickIcon.offset().left + $prevClickIcon.width()) > X) && ($prevClickIcon.offset().top < Y) && (($prevClickIcon.offset().top + $prevClickIcon.width()) > Y)) {
                    //process the event
                    event.preventDefault();
                    var newMonth = $picker.get('highlight').month - 1;
                    changeHighlightedDate($picker, null, newMonth, null);
                }
            });

            $decadeControls.on('click', '.js-showMonthPicker', function (event) {
                myDatepicker.toggleClass('is-pickingMonths');
            });

            /** Switch to the is-pickingYears state. */
            $yearControls.on('click', '.js-showYearPicker', function (event) {
                myDatepicker.toggleClass('is-pickingYears');
            });

            myDatepicker.find('.ms-Label').append("<i id=\"deadlineInfoIcon\" class=\"ms-Icon ms-Icon--circleInfo ms-fontColor-blue\" style=\"width: 30px;text-align: center;cursor:pointer;\" onclick=\"toggleInfo('deadlineInfo', this)\"></i>");
        });

        /** Change the highlighted date. */
        function changeHighlightedDate($picker, newYear, newMonth, newDay) {

            /** All variables are optional. If not provided, default to the current value. */
            if (newYear == null) {
                newYear = $picker.get('highlight').year;
            }
            if (newMonth == null) {
                newMonth = $picker.get('highlight').month;
            }
            if (newDay == null) {
                newDay = $picker.get('highlight').date;
            }

            /** Update it. */
            $picker.set('highlight', [newYear, newMonth, newDay]);

        }
    </script>
</body>

</html>
